<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加员工</title>
<link rel="icon" href="<c:url value='/imgs/logo.ico' />" />
<link type="text/css" rel="stylesheet" href="<c:url value='/css/index.css' />" />
<link type="text/css" rel="stylesheet" href="<c:url value='/css/add.css' />" />
<script type="text/javascript" charset="utf-8" src="<c:url value='/scripts/jquery-2.1.0.js'/>"></script>
</head>
<body>
	<div class="container">
		<%@ include file="/jsps/top.jsp"%>
		<div class="main">
			<form class="form employee" id="formData">
				<h2>添加员工</h2>
				<table>
					<tr>
						<td><label>所属机构：</label></td>
						<td><select name="mechid" class="select">
								<option selected value="0">&nbsp;&nbsp;-选择所属机构-</option>
								<c:forEach items="${mechanismList }" var="mechanism">
									<option value="${mechanism.mechid }">&nbsp;&nbsp;${mechanism.mechname }</option>
								</c:forEach>
						</select><span class="must">*</span></td>
					</tr>
					<tr>
						<td><label>工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label></td>
						<td><input type="text" class="txt" name="empid"
							placeholder="请输入不超过8位数字" maxlength="8" /><span class="must">*</span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><span class="error error1"></span></td>
					</tr>
					<tr>
						<td><label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label></td>
						<td><input type="text" class="txt" name="name"
							placeholder="请输入不超过20位字符" maxlength="20" /><span class="must">*</span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><span class="error error2"></span></td>
					</tr>
					<tr>
						<td><label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label></td>
						<td><input type="password" class="txt" name="password"
							value="111111" placeholder="请输入6~15位数字" maxlength="15" /><span
							class="must">*</span></td>
					</tr>
					<tr>
						<td></td>
						<td><span class="error error3"></span></td>
					</tr>
					<tr>
						<td><label>身份证号：</label></td>
						<td><input type="text" class="txt" name="idnumber"
							placeholder="请输入不超过18位字符" maxlength="18" /><span class="must">*</span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><span class="error error4"></span></td>
					</tr>
					<tr>
						<td><label>头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：</label></td>
						<td>
							<input class="pic" type="file" name="picmd5" />
							<img id="preview" class="headpic" src="<c:url value='/imgs/headpic.png' />" /><span class="must">*</span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><span class="error error5"></span></td>
					</tr>
					<tr>
						<td><label>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;限：</label></td>
						<td><select name="power" class="select">
								<option selected value="1">&nbsp;&nbsp;普通权限</option>
								<option value="0">&nbsp;&nbsp;管理员权限</option>
						</select></td>
					</tr>
					<tr>
						<td><label>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</label></td>
						<td><select name="state" class="select">
								<option selected value="0">&nbsp;&nbsp;任职状态</option>
								<option value="1">&nbsp;&nbsp;离职状态</option>
						</select></td>
					</tr>
				</table>
				<input class="btn addBtn" type="button" value="添加" "/> <input
					class="btn" type="reset" value="重置" />
			</form>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			$(".top .title").click(function(){
				location.href="<c:url value='/index.jsp'/>";
			});	
			
			$(".main .form .headpic").click(function(){
				$(".main .form .pic").click();
			});
			
			$(".main .form .pic").change(function(){
				var $file = $(this);
		        var fileObj = $file[0];
		        var windowURL = window.URL || window.webkitURL;
		        var dataURL;
		        var $img = $("#preview");

		        if (fileObj && fileObj.files && fileObj.files[0]) {
		            dataURL = windowURL.createObjectURL(fileObj.files[0]);
		            $img.attr('src', dataURL);
		        } else {
		            dataURL = $file.val();
		            var imgObj = document.getElementById("preview");
		            // 两个坑:
		            // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
		            // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
		            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
		            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

		        }
			});
			
			$(".main .form .addBtn").click(function() {
				$(".main .form .error").text("");
				var mechid = $("select[name='mechid']").val();
				var empid = $("input[name='empid']").val();
				var name = $("input[name='name']").val();
				var password = $("input[name='password']").val();
				var idnumber = $("input[name='idnumber']").val();
				var picmd5 = $("input[name='picmd5']").val();
				
				//alert(picmd5);
				
				if(mechid=="0"||$.isEmptyObject(empid.trim())||$.isEmptyObject(name.trim())||$.isEmptyObject(password.trim())||$.isEmptyObject(picmd5.trim())||$.isEmptyObject(idnumber.trim())){
					alert("星号内容不能为空！");
				}else{
					var formData = new FormData($("#formData")[0]);
					$.ajax({
						type : "post",
						url : "<c:url value='/addEmployee?type=add'/>",
						data: formData,	
						processData:false,
					    contentType:false,
						dataType: "json", 
						success : function(data) {
							if(data.flag=="1"){
								if($.isEmptyObject(data.empid)){
									data.empid = "";
								}
								if($.isEmptyObject(data.name)){
									data.name = "";
								}
								if($.isEmptyObject(data.password)){
									data.password = "";
								}
								if($.isEmptyObject(data.idnumber)){
									data.idnumber = "";
								}
								if($.isEmptyObject(data.picmd5)){
									data.picmd5 = "";
								}
								$(".main .form .error1").text(data.empid);
								$(".main .form .error2").text(data.name);
								$(".main .form .error3").text(data.password);
								$(".main .form .error4").text(data.idnumber);
								$(".main .form .error5").text(data.picmd5);
								$(".left").css("height",$(".main").height());
							}else{
								alert("添加成功!");
							}
						},
						error : function() {
							alert("操作失败，请重试！");
						}
					});
				}
			});
		})
	</script>
</body>
</html>

